{% extends "subscribe-form.html" %}
{% load static sekizai_tags tutorial_tags %}

{% block form_title %}Django Forms with three-way data-binding{% endblock %}

{% block addtoblock %}
	{{ block.super }}
	{% addtoblock "js" %}<script src="{% static 'js/djng-websocket.js' %}" type="text/javascript"></script>{% endaddtoblock %}
	{% add_data "ng-requires" "djng.websocket" %}
	{% addtoblock "ng-config" %}['djangoWebsocketProvider', function(djangoWebsocketProvider) { djangoWebsocketProvider.setURI('{{ WEBSOCKET_URI }}'); djangoWebsocketProvider.setLogLevel('debug'); djangoWebsocketProvider.setHeartbeat({{ WS4REDIS_HEARTBEAT }}); }]{% endaddtoblock %}
	<script src="{% static 'js/three-way-data-binding.js' %}" type="text/javascript"></script>
{% endblock addtoblock %}

{% block main-intro %}
<h1>Django Forms with three-way data-binding</h1>
<p class="lead">Point a second browser onto the same URL and observe form synchronization</p>
<p>This example shows, how to propagate the form's model-scope to a foreign browser using Websockets.</p>
{% endblock main-intro %}

{% block form_tag %}ng-model-options="{allowInvalid: true}" novalidate ng-controller="MyWebsocketCtrl"{% endblock %}

{% block form_foot %}
	{% verbatim %}
		<h5><code>MyWebsocketCtrl</code>'s scope:</h5>
		<pre>subscribe_data = {{ subscribe_data | json }}</pre>
	{% endverbatim %}
{% endblock %}

{% block form_submission %}{% endblock %}

{% block main-tutorial %}
<p>With <b>django-angular</b> and the additional Django app
<a href="https://github.com/jrief/django-websocket-redis">django-websocket-redis</a>, one can extend
two-way data-binding to propagate all changes on a model, back and forward with a corresponding
object stored on the server. This means, that the server “sees” whenever the model changes on the client
and can by itself, modify values on the client side at any time, without having the client
to poll for new messages.</p>
<p>This can be useful, when the server wants to inform the clients about asynchronous events such
as sport results, chat messages or multi-player game events.</p>
<p>In this example no submit buttons are available, because the server receives the Form's data on
every change event. Apart from initializing the angular module, the only JavaScript code required
for this example, is the statement <code>djangoWebsocket.connect</code>, which bi-directionally
binds the object <code>subscribe_data</code> from our Controller's <code>$scope</code> object, to an
equally named data bucket inside the remote Redis datastore.</p>

<p ng-init="tabList=['Form', 'View', 'HTML', 'JavaScript']"></p>
{% endblock main-tutorial %}

{% block main-sample-code %}
{% autoescape off %}
<div ng-show="activeTab==='Form'">{% pygments "forms/subscribe_form.py" %}</div>
<div ng-show="activeTab==='View'">{% pygments "views/threeway_databinding.py" %}</div>
<div ng-show="activeTab==='HTML'">{% pygments "tutorial/three-way-data-binding.html" %}</div>
<div ng-show="activeTab==='JavaScript'">{% pygments "static/js/three-way-data-binding.js" %}</div>
{% endautoescape %}
<p class="bg-info">Note that AngularJS directives are configured inside HTML, since only Django
templates can expand server variables.</p>
{% endblock main-sample-code %}
